<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排它</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .clock {
        margin: 20px 50px;
    }

    .clock span {
        display: inline-block;
        height: 50px;
        line-height: 50px;
    }
</style>

<body>
    <div class="clock">
        <span class="h">
            <img src="images/0.png" alt="">
            <img src="images/0.png" alt="">
        </span>
        <span><img src="../images/second1.png" alt=""></span>
        <span class="m">
            <img src="images/0.png" alt="">
            <img src="images/0.png" alt="">
        </span>
        <span><img src="../images/second1.png" alt=""></span>
        <span class="s">
            <img src="images/0.png" alt="">
            <img src="images/0.png" alt="">
        </span>
    </div>
    <div>
        <input type="text" id="txt1" placeholder="数字1">
        <select id="ys">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
            <option value="%">%</option>
        </select>
        <input type="text" id="txt2" placeholder="数字2">
        <button id="btn">计算</button>
        <input type="text" id="txt3" placeholder="结果">
    </div>

    <script>

        // 6、将数字时钟    （将数字时钟替换为图片时钟）  正计时   15：54：55
        function getTime() {
            var time = new Date()
            var hh = time.getHours().toString();
            var mm = time.getMinutes().toString();
            var ss = time.getSeconds().toString();

            // console.log(h);
            var h = document.getElementsByClassName('h')[0];
            var m = document.querySelector('.m');
            var s = document.querySelector('.s');

            hh = hh < 10 ? '0' + hh : hh;
            mm = mm < 10 ? '0' + mm : mm;
            ss = ss < 10 ? '0' + ss : ss;

            // console.log(hh.toString()[0]);

            var HH = document.querySelectorAll('.h>img')

            var MM = document.querySelectorAll('.m>img')

            var SS = document.querySelectorAll('.s>img')

            // console.log(HH, MM, SS);



            for(var i=0;i<2;i++){
                for(var j=0;j<10;j++){
                    if(hh[i]==j){
                        HH[i].src = '../images/'+j+'.png'
                    }
                }
            }
            for(var i=0;i<2;i++){
                for(var j=0;j<10;j++){
                    if(mm[i]==j){
                        MM[i].src = '../images/'+j+'.png'
                    }
                }
            }
            for(var i=0;i<2;i++){
                for(var j=0;j<10;j++){
                    if(ss[i]==j){
                        SS[i].src = '../images/'+j+'.png'
                    }
                }
            }



            /* if (hh[0] == 0) {
                HH[0].src = 'images/0.png'
            } else if (hh[0] == 1) {
                HH[0].src = 'images/1.png'
            } else if (hh[0] == 2) {
                HH[0].src = 'images/2.png'
            } else if (hh[0] == 3) {
                HH[0].src = 'images/3.png'
            } else if (hh[0] == 4) {
                HH[0].src = 'images/4.png'
            } else if (hh[0] == 5) {
                HH[0].src = 'images/5.png'
            } else if (hh[0] == 6) {
                HH[0].src = 'images/6.png'
            } else if (hh[0] == 7) {
                HH[0].src = 'images/7.png'
            } else if (hh[0] == 8) {
                HH[0].src = 'images/8.png'
            } else if (hh[0] == 9) {
                HH[0].src = 'images/9.png'
            }
            if (hh[1] == 0) {
                HH[1].src = 'images/0.png'
            } else if (hh[1] == 1) {
                HH[1].src = 'images/1.png'
            } else if (hh[1] == 2) {
                HH[1].src = 'images/2.png'
            } else if (hh[1] == 3) {
                HH[1].src = 'images/3.png'
            } else if (hh[1] == 4) {
                HH[1].src = 'images/4.png'
            } else if (hh[1] == 5) {
                HH[1].src = 'images/5.png'
            } else if (hh[1] == 6) {
                HH[1].src = 'images/6.png'
            } else if (hh[1] == 7) {
                HH[1].src = 'images/7.png'
            } else if (hh[1] == 8) {
                HH[1].src = 'images/8.png'
            } else if (hh[1] == 9) {
                HH[1].src = 'images/9.png'
            }





            if (mm[0] == 0) {
                MM[0].src = 'images/0.png'
            } else if (mm[0] == 1) {
                MM[0].src = 'images/1.png'
            } else if (mm[0] == 2) {
                MM[0].src = 'images/2.png'
            } else if (mm[0] == 3) {
                MM[0].src = 'images/3.png'
            } else if (mm[0] == 4) {
                MM[0].src = 'images/4.png'
            } else if (mm[0] == 5) {
                MM[0].src = 'images/5.png'
            } else if (mm[0] == 6) {
                MM[0].src = 'images/6.png'
            } else if (mm[0] == 7) {
                MM[0].src = 'images/7.png'
            } else if (mm[0] == 8) {
                MM[0].src = 'images/8.png'
            } else if (mm[0] == 9) {
                MM[0].src = 'images/9.png'
            }
            if (mm[1] == 0) {
                MM[1].src = 'images/0.png'
            } else if (mm[1] == 1) {
                MM[1].src = 'images/1.png'
            } else if (mm[1] == 2) {
                MM[1].src = 'images/2.png'
            } else if (mm[1] == 3) {
                MM[1].src = 'images/3.png'
            } else if (mm[1] == 4) {
                MM[1].src = 'images/4.png'
            } else if (mm[1] == 5) {
                MM[1].src = 'images/5.png'
            } else if (mm[1] == 6) {
                MM[1].src = 'images/6.png'
            } else if (mm[1] == 7) {
                MM[1].src = 'images/7.png'
            } else if (mm[1] == 8) {
                MM[1].src = 'images/8.png'
            } else if (mm[1] == 9) {
                MM[1].src = 'images/9.png'
            }




            if (ss[0] == 0) {
                SS[0].src = 'images/0.png'
            } else if (ss[0] == 1) {
                SS[0].src = 'images/1.png'
            } else if (ss[0] == 2) {
                SS[0].src = 'images/2.png'
            } else if (ss[0] == 3) {
                SS[0].src = 'images/3.png'
            } else if (ss[0] == 4) {
                SS[0].src = 'images/4.png'
            } else if (ss[0] == 5) {
                SS[0].src = 'images/5.png'
            } else if (ss[0] == 6) {
                SS[0].src = 'images/6.png'
            } else if (ss[0] == 7) {
                SS[0].src = 'images/7.png'
            } else if (ss[0] == 8) {
                SS[0].src = 'images/8.png'
            } else if (ss[0] == 9) {
                SS[0].src = 'images/9.png'
            }

            if (ss[1] == 0) {
                SS[1].src = 'images/0.png'
            } else if (ss[1] == 1) {
                SS[1].src = 'images/1.png'
            } else if (ss[1] == 2) {
                SS[1].src = 'images/2.png'
            } else if (ss[1] == 3) {
                SS[1].src = 'images/3.png'
            } else if (ss[1] == 4) {
                SS[1].src = 'images/4.png'
            } else if (ss[1] == 5) {
                SS[1].src = 'images/5.png'
            } else if (ss[1] == 6) {
                SS[1].src = 'images/6.png'
            } else if (ss[1] == 7) {
                SS[1].src = 'images/7.png'
            } else if (ss[1] == 8) {
                SS[1].src = 'images/8.png'
            } else if (ss[1] == 9) {
                SS[1].src = 'images/9.png'
            }
 */
            // h.innerHTML = hh;
            // m.innerHTML = mm;
            // s.innerHTML = ss;

        }
        getTime()
        setInterval(getTime, 1000)


        // 4、实现计算器(简易计算器)

        var txt1 = document.querySelector('#txt1')
        var ys = document.querySelector('#ys')
        var txt2 = document.querySelector('#txt2')
        var btn = document.querySelector('#btn')
        var txt3 = document.querySelector('#txt3')

        btn.onclick = function () {
            var a = Number(txt1.value);
            var b = Number(txt2.value);
            var sum = 0;
            switch (true) {
                case ys.value == '+':
                    sum = a+b;
                    break;
                    case ys.value == '-':
                    sum = a-b;
                    break;
                    case ys.value == '*':
                    sum = a*b;
                    break;
                    case ys.value == '/':
                    sum = a/b;
                    break;
                    case ys.value == '%':
                    sum = a%b;
                    break;
            }
            txt1.value = '';
            txt2.value = '';
            txt3.value = sum;
        }


    </script>
</body>

</html>